<template>
  <div class="swiper">
    <el-carousel height="460px">
      <el-carousel-item v-for="(item, index) in imgList" :key="index">
        <img :src="item" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "Swiper",
  setup() {
    const imgList = reactive([
      require("../../../assets/images/main/hd/swiper/one.jpg"),
      require("../../../assets/images/main/hd/swiper/two.webp"),
      require("../../../assets/images/main/hd/swiper/three.webp"),
    ]);

    return {
      imgList,
    };
  },
};
</script>

<style lang="less" scoped>
.swiper {
  float: left;
  width: calc(100% - 234px);
  height: 100%;
  .el-carousel__item img {
    width: 100%;
    height: 100%;
  }
  :deep(.el-carousel__button){
    background-color: gray;
  }
}
</style>